<template>
	<h3>User {{ $route.params.id }}</h3>
	<button @click="jump">jump</button>
	<hr />
	{{ id }}
</template>

<script>
	export default {
		props: ["id"],
		data() {
			return {
				id: 123,
			};
		},
		created() {
			this.$watch(
				// 监听路由中的动态段的变化
				() => this.$route.params,

				// 新值 原有值
				(newValue, oldValue) => {
					// 对路由变化做出响应...
					console.log(newValue, oldValue);
				}
			);
		},
		methods: {
			// 跳转自己 组件不会被销毁 只会执行更新逻辑
			jump() {
				this.id++;
				this.$router.push({
					name: "User",
					params: { id: this.id },
				});
			},
		},

		/* 局部路由守卫 */
		beforeRouteEnter(to, from) {
			// 在渲染该组件的对应路由被验证前调用
			// 不能获取组件实例 `this` ！
			// 因为当守卫执行时，组件实例还没被创建！
			console.log("/about beforeRouteEnter", from, to);
			return Math.random() > 0.5
		},
		// beforeRouteEnter(to, from, next) {
		// 	next((vm) => {
		// 		// 通过 `vm` 访问组件实例
		// 		console.log("vm=", vm);
		// 	});
		// },
		beforeRouteUpdate(to, from) {
			// 在当前路由改变，但是该组件被复用时调用
			// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
			// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
			// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
			console.log("/about beforeRouteUpdate", from, to);
		},
		beforeRouteLeave(to, from) {
			// 在导航离开渲染该组件的对应路由时调用
			// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
			console.log("/about beforeRouteLeave", from, to);
		},
	};
</script>

<style>
</style>